<template>
  <div>
    <el-button @click="Personne">添加管理员</el-button>
  </div>
  <el-table :data="filterTableData" style="width: 100%">
    <el-table-column label="编号" prop="adminid" />
    <el-table-column label="账户" prop="adminname" />
    <el-table-column label="角色" prop="role">
      <template #default="scope">
        <div>{{ unll(scope.row.role) }}</div>
      </template>
    </el-table-column>

    <el-table-column align="right">
      <template #header>
        <el-table-column
          label="角色"
          prop="role"
          size="small"
          placeholder="Type to search"
        />
        <!-- <el-input v-model="search" size="small" placeholder="Type to search" /> -->
      </template>
      <template #default="scope">
        <el-button size="small" @click="handleEdit(scope.row.adminname)"
          >修改</el-button
        >
        <el-button
          size="small"
          type="danger"
          @click="handleDelete(scope.row.adminid)"
          >删除</el-button
        >
      </template>
    </el-table-column>
  </el-table>

    <Personnel v-model="isdialog"  @dialog="usuer"></Personnel>
    <el-dialog v-model="isShowEdit" title="修改操作人员" width="500">
    <EditOper  :adminname="adminnameEdit"   @closeWin="closeEditFn"></EditOper>
    </el-dialog>
</template>
<script lang="ts" setup>
import { reactive, ref } from "vue";
import { additionapi, Deleteoperatorapi } from "@/api/management";
import { IOper } from "@/MyType/index.ts";
import { ElMessage, ElMessageBox } from "element-plus";
import Personnel from "./Personnel.vue";
import EditOper from "./EditOper.vue";
//
const filterTableData = reactive<Array<IOper>>([]);

const unll = (role: number) => {
  const djb = {
    1: "超级管理员",
    2: "管理员",
    3: "普通用户",
    4: "测试账号",
  };
  return djb[role];
};
// 查看
const administrator = () => {
  additionapi().then((res) => {
    if (res.data.code === "200") {
      // console.log(res);
      filterTableData.length = 0;
      filterTableData.push(...res.data.data);
    }
  });
};
administrator();
// 删除
const handleDelete = (adminid: string) => {
  ElMessageBox.confirm("确定要删除？", "删除提示", {
    confirmButtonText: "确定",
    cancelButtonText: "取消",
    type: "warning",
  }).then(() => {
    Deleteoperatorapi(adminid).then((res) => {
      if (res.data.code === "200") {
        ElMessage({
          type: "success",
          message: "删除成功",
        });
        administrator();
      } else {
        ElMessage({
          type: "info",
          message: "删除失败",
        });
      }
    });
  });
};
//const isShowEdit = ref(true);

const isdialog = ref(false);
// 显示
const Personne=()=>{
  isdialog.value = true;
}
// 取消按键
const usuer=(isRefresh:boolean)=>{
  isdialog.value = false;
 isRefresh && administrator();
}

// 修改
const isShowEdit = ref(false);
const adminnameEdit = ref("");

const handleEdit=(adminname:string)=>{
  adminnameEdit.value = adminname;
  isShowEdit.value = true;
}

const closeEditFn=(isRefresh:boolean)=>{
  isShowEdit.value = false;
  isRefresh && administrator();
}


</script>
